<!--
 * @Description: 添加人到通讯录
 * @Author: wws1993
 * @Date: 2020-12-03 15:11:46
 * @LastEditTime: 2020-12-03 15:57:17
 * @LastEditors: wws1993
 * @FilePath: \todoManager\src\components\MailListModule\add.vue
-->

<template>
  <el-dialog :visible="visible" append-to-body width="520px" title="新增联系人" @close="toggleAdd">
    <!-- 表单 start -->
    <el-form ref="form" :model="formData" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="formData.name" placeholder="这儿写姓名" ref="autoFoucs"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formData.phone" placeholder="这儿写手机号"></el-input>
      </el-form-item>
      <el-form-item label="公司">
        <el-input v-model="formData.companyName" placeholder="这儿写公司"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="formData.job" placeholder="这儿写职位"></el-input>
      </el-form-item>
    </el-form>
    <!-- 表单 end -->
    <div slot="footer">
      <el-button type="info" size="mini" @click="toggleAdd" plain>取消</el-button>
      <el-button :type="theme" size="mini" @click="save" plain>确定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import Vue from 'vue';
import {Component, Watch} from 'vue-property-decorator';
import { mapState, mapMutations, mapActions } from 'vuex';

@Component({
  computed: {
    ...mapState({
      theme: (state: any) => state.theme,
      visible: (state: any) => state.MailListModule.addState,
      formData: (state: any) => state.MailListModule.form,
    }),
  },
  methods: {
    ...mapMutations({
      toggleAdd: 'MailListModule/toggleAdd',
    }),
    ...mapActions({
      save: 'MailListModule/add',
    }),
  },
})
export default class MailListModuleAdd extends Vue {
  @Watch('visible')
  private handleVisible(state: boolean) {
    if (state) {
      setTimeout(() => {
        const el = this.$refs.autoFoucs as HTMLInputElement;
        el.focus();
      }, 0);
    }
  }
}
</script>